<template>
	<uni-row class="demo-uni-row" :gutter="20">
		<!--右侧商品分类列表-->
		<uni-col :span="7">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="left_box">
					<uni-list>
						<!-- 显示所有商品 -->
						<uni-list-item clickable @click="selectGroup('ALL')" :key="0">
							<template v-slot:header>
								<view v-if="params.type==='ALL'" class="active gr">所有商品</view>
								<view v-else class="gr">所有商品</view>
							</template>
						</uni-list-item>
						<!-- 遍历商品分类 -->
						<uni-list-item clickable v-for="group in goodsGroup" :key="group.menuId"
							@click="selectGroup(group.menuCode)">
							<template v-slot:header>
								<view v-if="params.type===group.menuCode" class="active gr">{{group.title}}</view>
								<view v-else class="gr">{{group.title}}</view>
							</template>
						</uni-list-item>
					</uni-list>
				</view>
			</scroll-view>
		</uni-col>
		<!--左侧商品-->
		<uni-col :span="17">
			<scroll-view scroll-y="true" class="scroll-Y">
				<view class="right_box">
					<!--婚庆套餐 -->
					<view class="goods-item" v-for="(item,index) in weddingList" :key="item.id+'a'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl"></image>
							</uni-col>
							<uni-col :span="10">
								<view>
									<view class="goods-table-box"><text class="goods-table">酒席</text>
										<view class="goods-name">{{item.weddingName}}</view>
									</view>
									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.salePrice}} 价格</text>
										<!-- 		<text class="totalPrice">¥{{item.dishPrice}}</text> -->
									</view>
								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- 婚庆主持人 -->
					<view class="goods-item" v-for="(item,index) in hostList" :key="item.id+'b'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl"></image>
							</uni-col>
							<uni-col :span="10">
								<view>
									<view class="goods-table-box">
										<text class="goods-table">主持</text>
										<view class="goods-name">{{item.name}}</view>
									</view>

									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.hostsFee}} 价格</text>
										<!-- 		<text class="totalPrice">¥{{item.dishPrice}}</text> -->
									</view>

								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- 婚庆摄影师 -->
					<view class="goods-item" v-for="(item,index) in photographerList" :key="item.id+'c'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl"></image>
							</uni-col>
							<uni-col :span="10">
								<view>
									<view class="goods-table-box">
										<text class="goods-table">摄影</text>
										<view class="goods-name">{{item.name}}</view>
									</view>
									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.photographyFee}} 价格</text>
										<!-- 		<text class="totalPrice">¥{{item.dishPrice}}</text> -->
									</view>
								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- 婚庆歌手 -->
					<view class="goods-item" v-for="(item,index) in singerList" :key="item.id+'d'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl"></image>
							</uni-col>
							<uni-col :span="10">
								<view>
									<view class="goods-table-box">
										<text class="goods-table">歌手</text>
										<view class="goods-name">{{item.name}}</view>
									</view>
									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.singersFee}} 价格</text>
										<!-- 		<text class="totalPrice">¥{{item.dishPrice}}</text> -->
									</view>

								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>

					<!-- 商品列表(套餐) -->
					<view class="goods-item" v-for="(item,index) in categorieList" :key="item.id+'e'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl" @click="toGoodsDetail(item.id)"></image>
							</uni-col>
							<uni-col :span="10">
								<view @click="toGoodsDetail(item.id)">
									<view class="goods-table-box"><text class="goods-table">套餐</text>
										<text class="goods-name">{{item.categoryName}}</text>
									</view>
									<view class="goods-text">
										<view class="goods_dish_count">配菜：<text>供12道美食</text>
										</view>
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.salePrice}} 价格</text>
										<text class="totalPrice">¥{{item.totalPrice}}</text>
									</view>
								</view>
							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- 商品列表(自选) -->
					<view class="goods-item" v-for="(item,index) in cuisineList" :key="item.id+'f'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl" @click="toDishDetail(item.id)"></image>
							</uni-col>
							<uni-col :span="10">
								<view @click="toDishDetail(item.id)">
									<view class="goods-table-box"><text class="goods-table">自选</text>
										<text class="goods-name">{{item.dishName}}</text>
									</view>
									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.salePrice}} 价格</text>
										<text class="totalPrice">¥{{item.dishPrice}}</text>
									</view>
								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
					<!-- 酒水自选 -->
					<view class="goods-item" v-for="(item,index) in liquorList" :key="item.id+'g'">
						<uni-row class="demo-uni-row">
							<uni-col :span="10">
								<image class="goods-pic" :src="item.imgUrl" @click="toDishDetail(item.id)"></image>
							</uni-col>
							<uni-col :span="10">
								<view @click="toDishDetail(item.id)">
									<view class="goods-table-box"><text class="goods-table">美酒</text>
										<text class="goods-name">{{item.dishName}}</text>
									</view>
									<view class="goods-text">
										<view class="goods_score_text">评分：4.7</view>
										<view class="sales_count">月售：99</view>
									</view>
									<view class="goods-price">
										<text class="salePrice">¥&nbsp;{{item.salePrice}} 价格</text>
										<text class="totalPrice">¥{{item.dishPrice}}</text>
									</view>
								</view>

							</uni-col>
							<uni-col :span="4">
								<view class="cart-icon">
									<image src="../../static/icon_r/gouwuche.png"></image>
								</view>
							</uni-col>
						</uni-row>
					</view>
				</view>
			</scroll-view>
		</uni-col>
	</uni-row>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				params: {
					current: 1, // 第一页
					pageSize: 10, // 每页十个
					type: "ALL" // 当前状态
				},
				page: {
					//婚庆总数
					weddingTotal: 0,
					//主持人总数
					hostTotal: 0,
					//摄影师总数
					photographerTotal: 0,
					//歌手总数
					singerTotal: 0,
					//套餐总数
					cgTotal: 0,
					//菜品总数
					dishTotal: 0,
				},
				//婚庆套餐
				weddingList: [],
				//婚庆主持人
				hostList: [],
				//婚庆摄影师
				photographerList: [],
				//婚庆歌手
				singerList: [],
				//菜品套餐
				categorieList: [],
				//菜品自选
				cuisineList: [],
				//酒水
				liquorList: []
			}
		},
		computed: {
			...mapState(['goodsGroup'])
		},
		onReachBottom() {
			console.log("sd")
			if (this.params.current < this.page.cgTotal) {
				this.params.current++;
				// 模拟请求数据的过程
				setTimeout(() => {
					this.queryProGroupList()
				}, 1000);
			}
		},
		methods: {
			///跳转商品详情页
			toGoodsDetail(goodsId) {
				const urls = `/pages/goods/detail?id=${goodsId}`
				uni.navigateTo({
					url: "/pages/goods/datail?id=" + goodsId
				})
			},
			///跳转商品详情页
			toDishDetail(dishId) {
				uni.navigateTo({
					url: "/pages/goods/dishDatail?id=" + dishId
				})
			},
			//点击事件-按鼠标点击触发执行查询商品分类
			selectGroup(menuCode) {
				this.params.type = menuCode
				console.log(this.params)
				//婚庆套餐
				this.weddingList = []
				//婚庆主持人
				this.hostList = []
				//婚庆摄影师
				this.photographerList = []
				//婚庆歌手
				this.singerList = []
				//菜品套餐
				this.categorieList = []
				//菜品自选
				this.cuisineList = []
				//酒水
				this.liquorList = []
				this.queryProGroupList()
			},

			/**
			 * 查询商品分类列表
			 */
			async queryProGroupList() {
				const {
					status,
					data,
					msg
				} = await this.$api.goods.queryProGroupListAction(this.params)


				if (status == 200) {
					//婚庆套餐
					if (data.weddingList != null && data.weddingList.length > 0) {
						for (let i = 0; i < data.weddingList.length; i++) {
							data.weddingList[i].imgUrl = this.$store.state.url + data.weddingList[i].imgUrl
							this.weddingList.push(data.weddingList[i])

						}
						this.page.weddingTotal = data.weddingTotal
					}
					//婚庆主持人
					if (data.hostList != null && data.hostList.length > 0) {
						for (let i = 0; i < data.hostList.length; i++) {
							data.hostList[i].imgUrl = this.$store.state.url + data.hostList[i].imgUrl
							this.hostList.push(data.hostList[i])

						}
						this.page.hostTotal = data.hostTotal
					}
					//婚庆摄影师
					if (data.photographerList != null && data.photographerList.length > 0) {
						for (let i = 0; i < data.photographerList.length; i++) {
							data.photographerList[i].imgUrl = this.$store.state.url + data.photographerList[i].imgUrl
							this.photographerList.push(data.photographerList[i])

						}
						this.page.photographerTotal = data.photographerTotal
					}

					//婚庆歌手
					if (data.singerList != null && data.singerList.length > 0) {
						for (let i = 0; i < data.singerList.length; i++) {
							data.singerList[i].imgUrl = this.$store.state.url + data.singerList[i].imgUrl
							this.singerList.push(data.singerList[i])
						}
						this.page.singerTotal = data.singerTotal
					}
					//菜品套餐
					if (data.categorieList != null && data.categorieList.length > 0) {
						for (let i = 0; i < data.categorieList.length; i++) {
							data.categorieList[i].imgUrl = this.$store.state.url + data.categorieList[i].imgUrl
							this.categorieList.push(data.categorieList[i])
						}

						this.page.cgTotal = data.cgTotal
					}
					//菜品自选
					if (data.cuisineList != null && data.cuisineList.length > 0) {
						for (let i = 0; i < data.cuisineList.length; i++) {
							data.cuisineList[i].imgUrl = this.$store.state.url + data.cuisineList[i].imgUrl
							this.cuisineList.push(data.cuisineList[i])
						}
						this.page.dishTotal = data.dishTotal
					}
					//酒水自选
					if (data.liquorList != null && data.liquorList.length > 0) {
						for (let i = 0; i < data.liquorList.length; i++) {
							data.liquorList[i].imgUrl = this.$store.state.url + data.liquorList[i].imgUrl
							this.liquorList.push(data.liquorList[i])
						}
						this.page.dishTotal = data.dishTotal
					}
				}
			}
		},
		onLoad() {
			if (uni.getStorageSync("groupCode")) {
				this.params.type = uni.getStorageSync("groupCode")
			}
			this.queryProGroupList();
		},
		onShow() {
			if (uni.getStorageSync("groupCode")) {
				this.params.type = uni.getStorageSync("groupCode")
				//婚庆套餐
				this.weddingList = []
				//婚庆主持人
				this.hostList = []
				//婚庆摄影师
				this.photographerList = []
				//婚庆歌手
				this.singerList = []
				//菜品套餐
				this.categorieList = []
				//菜品自选
				this.cuisineList = []
				//酒水
				this.liquorList = []
				this.queryProGroupList();
				uni.removeStorageSync("groupCode")
			}

		}
	}
</script>

<style scoped lang="less">
	.left_box {
		height: calc(100vh - 12upx);
		background: white;
		overflow-y: auto;
		overflow-x: hidden;

		.active {
			color: #FA541C;
			font-weight: bold;
			border-left: solid 10upx #FA541C;
			// border-radius: 10upx;
		}

		.gr {
			font-size: 24upx;
			padding-left: 20upx;
		}
	}

	.right_box {
		height: calc(100vh - 12upx);
		background: white;
		overflow-y: auto;
		overflow-x: hidden;

		//单个商品样式
		.goods-item {
			margin: 15upx;
			background: #fff;
			height: 210upx;
			border-radius: 10upx;
			font-size: 18upx;
			border: 1px solid #f3f3f3;
			box-shadow: 0 0 4px #f3f3f3;

			//商品图
			.goods-pic {
				width: 200upx;
				height: 200upx;
				// height: 100%;
			}

			//商品名称
			.goods-table-box {
				font-size: 26upx;
				// float: left;
				width: 100%;
				height: 100%;
				line-height: 30upx;
				text-align: left;

				.goods-table {
					width: 30%;
					height: 30upx;
					float: left;
					font-size: 25upx;
					background-color: red;
					line-height: 30upx;
					text-align: center;
					color: white;
					border-radius: 20%;
				}

				.goods-name {
					width: 65%;
					height: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					float: left;
					line-height: 30upx;
					margin-left: 10upx;
				}
			}

			// //商品名称
			// .goods-name {
			// 	margin-top: 10upx;
			// 	font-size: 25upx;
			// 	color: black;
			// 	// font-weight: bold;
			// 	width: 100%;
			// 	height: 30upx;
			// 	line-height: 30upx;
			// }

			//商品介绍
			.goods-text {
				font-size: 22upx;
				width: 100%;
				margin-top: 10upx;
				max-height: 140upx;
				float: left;

				//配菜数量
				.goods_dish_count {
					width: 100%;
					height: 30upx;
					line-height: 30upx;

					text {
						width: 100upx;
						background-color: #fcd39b;
						color: red;

					}
				}

				//菜品评分
				.goods_score_text {
					width: 100%;
					height: 30upx;
					line-height: 30upx;
					color: red;
					margin-top: 10upx;
				}

				//月销
				.sales_count {
					width: 100%;
					height: 30upx;
					line-height: 30upx;
					margin-top: 10upx;
				}
			}


			//商品价格
			.goods-price {
				width: 100%;
				height: 30upx;
				line-height: 30upx;
				margin-top: 20upx;

				//销售价格样式
				.salePrice {
					font-size: 25upx;
					color: red;
					font-weight: bold;
				}

				.totalPrice {
					text-decoration: line-through;
					font-size: 25upx;
					margin-left: 10upx;
					font-weight: bold;
					color: #9b9b9b;
				}
			}

			//购物车图标
			.cart-icon {
				width: 50upx;
				text-align: center;
				line-height: 200upx;

				image {
					width: 30upx;
					height: 30upx;
					background: #eefeff;
					border-radius: 30%;
				}
			}

		}
	}
</style>